<template>
  <div class="case">
    <div class="case_title">
      <span class="title1">相关案例</span>
      <span class="title2">SOME CASE</span>
    </div>
    <van-tabs  active="1" @change="onTabChange">
      <template v-for="(item) in caseData">
        <van-tab :title="item.name"
                 :key="item.id"
                 >
          <van-swipe class="my-swipe"
                     :autoplay="3000"
                     indicator-color="white">
            <template v-for="(item2) in item.pic_list">
              <van-swipe-item :key="item2">
                <img class="home_img"
                     :src="item2" />
              </van-swipe-item>
            </template>
          </van-swipe>
        </van-tab>
      </template>
    </van-tabs>

    <!--  -->
    <div class="title-show">详情图</div>
    <div v-if="caseData[currentIndex]"  class="image-show">
      <div  v-for="(item) in caseData[currentIndex].detail_pic"
           :key="item.id">
        <img :src="item"
             style="width:90%;text-align:center;margin:50px auto;display: block;"/>
      </div>
    </div>
  </div>
</template>

    
<script>
import { getCase } from "@/api/case.js";
export default {
  components: {},
  data() {
    return {
      caseData: [],
      currentIndex: 0,
    };
  },
  computed: {},
  watch: {},

  methods: {
    getCase() {
      getCase().then((res) => {
        let data = res.data;
        for (let i = 0; i < data.length; i++) {
          if (data[i]["pic_list"] != "" || data[i]["pic_list"] != null) {
            data[i]["pic_list"] = data[i]["pic_list"].split(",");
          } else {
            data[i]["pic_list"] = [];
          }
          if (data[i]["detail_pic"] != "" || data[i]["detail_pic"] != null) {
            data[i]["detail_pic"] = data[i]["detail_pic"].split(",");
          } else {
            data[i]["pic_list"] = [];
          }
        }
        console.log(data, ":data");
        this.$nextTick(() => {
          this.caseData = data;
        });
      })
    },
    onTabChange(event) {
        this.currentIndex = event;
    } 
  },

  mounted() {
    this.getCase();
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.case {
  width: 100%;
  background-color: $color_bg;
  &_title {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px 0;
    @extend .flex_center;
    .title1 {
      font-size: 46px;
      font-weight: bold;
    }
    .title2 {
      margin-top: 20px;
      font-size: 26px;
      font-weight: bold;
      color: rgb(205, 171, 45);
    }
  }
}
.home_img {
  width: 100%;
  height: 450px;
}
.image-show {
    margin: 50px 0;
}
.title-show {
    width: 90%;
    color: #fff;
    border-radius: 10px;
    background-color: rgb(59,89,153);
    width:90%;
    text-align: center;
    margin: 50px auto;
    padding: 20px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
}
</style>
